<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>环境气象监测</title>
    <link rel="icon" type="image/x-icon" href="../../images/logo.png">
    <!-- 下拉框 -->
    <link rel="stylesheet" href="../../plugin/M_select/js/M_select/M_select.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/weather.css">
</head>
<body>
   <div class="box">
        <!-- 头部 -->
        <div class="header-box">
                <img src="../../images/headeBg.png" alt="">
                <div class="weather-box">
                    <span>郑州 小雨转多云 32/16℃</span>
                </div>
                <h1 class="header-title"><img src="../../images/header.png" alt=""></h1>
                <div class="header-action">
                    <span class="action-time"></span>
                    <a href="javascript:;">管理中心</a>
                    <a href="javascript:;">退出</a>
                </div>
            </div>
        <div class="main-box">
            <!-- 侧边导航 -->
            <ul class="aside-box">
                    <li>
                        <a href="../home.html">
                            <span>
                                <img class="aside-img" src="../../images/home.png" alt="">
                                <img class="aside-imgA " src="../../images/homeA.png" alt="">
                                首页
                            </span>
                        </a>
                    </li>
                    <li class="active">
                            <a href="./development.html">
                                <span>
                                    <img class="aside-img" src="../../images/huanjing.png" alt="">
                                    <img class="aside-imgA" src="../../images/huanjingA.png" alt="">
                                    产业发展环境
                                </span>
                            </a>
                        </li>
                    <li>
                        <a href="../basic/basic.html">
                            <span>
                                <img class="aside-img" src="../../images/yaosu.png" alt="">
                                <img class="aside-imgA" src="../../images/yaosuA.png" alt="">
                                产业基础要素
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../passengerFlow/destination.html">
                            <span>
                                <img class="aside-img" src="../../images/keliu.png" alt="">
                                <img class="aside-imgA" src="../../images/keliuA.png" alt="">
                                旅游客流监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../productTesting/index.html">
                            <span>
                                <img class="aside-img" src="../../images/chanpin.png" alt="">
                                <img class="aside-imgA" src="../../images/chanpinA.png" alt="">
                                旅游产品监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../enterprise/scenicMonitor.html">
                            <span>
                                <img class="aside-img" src="../../images/qiye.png" alt="">
                                <img class="aside-imgA" src="../../images/qiyeA.png" alt="">
                                旅游企业监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../tourismProject/index.html">
                            <span>
                                <img class="aside-img" src="../../images/xiangmu.png" alt="">
                                <img class="aside-imgA" src="../../images/xiangmuA.png" alt="">
                                旅游项目监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../brand/brand.html">
                            <span>
                                <img class="aside-img" src="../../images/pinpai.png" alt="">
                                <img class="aside-imgA" src="../../images/pinpaiA.png" alt="">
                                旅游品牌监测
                            </span>
                        </a>
                    </li>
                </ul>
            <!-- 主题内容 -->
            <div class="content-box">
                <div class="content-nav-box">
                    <a href="development.html">发展环境监测 </a>
                    <a class="active" href="#"> 环境气象监测</a>
                    <a href="traffic.html">交通监测</a>
                    <a href="lyrical.html">舆情监测</a>
                </div>
                 <!-- 选择城市 -->
                <div class="select-city">
                    <span>城市选择</span>
                    <div class="select-box">
                        <div>
                            <select name="" id="selectCity" class="select01">
                                <option value="zhengzhou">郑州</option>
                                <option value="kaifeng">开封</option>
                                <option value="luoyang">洛阳</option>
                                <option value="jiaozuo">焦作</option>
                                <option value="nanyang">南阳</option>
                                <option value="anyang">安阳</option>                             
                           </select>
                        </div>
                    </div>
                    <div><a href="./weather_all.html">查看全省</a></div>
                </div>
                <div class="weather-content">
                    <!-- 主体 -->
                    <div class="weather-left-box left-box">
                        <div class="left-up">
                            <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png">
                                    实时天气预报
                                </h3>
                            </div>
                            <div class="today-box">
                                <div class="today-specific">
                                    <div class="real-time">
                                        <i><img></i>
                                        <div>
                                            <p></p>
                                            <h3></h3>
                                        </div>
                                    </div>
                                    <div class="real-list">                            
                                        <div>
                                            <p>
                                                <span>空气质量</span>
                                                <span id="airQuality"></span>
                                            </p>
                                            <p></p>
                                        </div> 
                                        <div>
                                            <p>
                                                <span>风力风向</span>
                                                <span id="wind"></span>
                                            </p>
                                            <p>
                                                <span>降水量</span>
                                                <span id="precipitation"></span>
                                            </p>
                                        </div>
                                        <div>
                                            <p>
                                                <span>湿度</span>
                                                <span id="humidity"></span>
                                            </p>
                                            <p>
                                                <span>大气压强</span>
                                                <span id="atmospheric"></span>
                                            </p>
                                        </div> 
                                    </div>
                                </div>
                                <ul>
                                    <!-- 白天和晚上天气详情 -->
                                    <li class="day-list">
                                        <p>白天</p>
                                        <div>
                                            <i><img ></i>
                                            <p>
                                                <span class="cond"></span>
                                                <span class="tmp"></span>
                                            </p>
                                            <p>
                                                <span class="wind"></span>
                                                <span>日出时间<b class="sunrise"></b></span>
                                            </p>
                                        </div>
                                    </li>
                                    <li class="night-list">
                                        <p>夜间</p>
                                        <div>
                                            <i><img ></i>
                                            <p>
                                                <span class="cond"></span>
                                                <span class="tmp"></span>
                                            </p>
                                            <p>
                                                <span class="wind"></span>
                                                <span>日落时间<b class="sunrise"></b></span>
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="left-down">
                            <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png">
                                    24小时天气预报
                                </h3>
                            </div>
                            <div class="allDay-box">
                                <ul class="weather-list">
                                    <li>
                                        <span>10时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>12时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>14时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>16时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>18时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>20时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>22时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>24时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>2时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>4时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>6时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                    <li>
                                        <span>8时</span>
                                        <span class="weather-span"></span>
                                        <i><img></i>                                
                                    </li>
                                </ul>
                                <div id="tmpLine"></div>
                            </div>
                        </div>
                    </div>
                    <div class="weather-right-box right-box">
                        <div class="weather-weeks-box">
                            <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png">
                                    7-15天天气预报
                                </h3>                               
                            </div>
                            <ul class="date-list">
                                <li class="active">
                                    <span>7天天气预报</span>
                                </li>
                                <li>
                                    <span>8-15天天气预报</span>
                                </li>
                            </ul>
                            <div class="weeks-list">
                                <ul class="data-list">
                                    <li>
                                        <ul>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>                                    
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                            <li>
                                                <p></p>
                                                <i class="day-img"><img></i>
                                                <i class="night-img"><img></i>
                                                <span class="weather-span"></span>
                                                <span class="tmp-span"></span>
                                                <span class="wind-direction"></span>
                                                <span class="wind-power"></span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="right-down">
                            <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png">
                                    7-15天天气预报
                                </h3>
                                <ul>
                                    <li class="active">空气质量</li>
                                    <li>温度</li>
                                    <li>相对湿度</li>
                                    <li>降水量</li>
                                    <li>风力风向</li>
                                </ul>
                            </div>
                            <ul class="echarts-list">
                                <li  id="air">
                                    <!-- <div class="echarts" id="air"></div> -->
                                </li>
                                <li class="chart-hd" id="temperature">
                                    <!-- <div id="temperature" class="echarts"></div> -->
                                </li>
                                <li class="chart-hd" id="moisture">
                                    <!-- <div id="moisture" class="echarts"></div> -->
                                </li>
                                <li class="chart-hd" id="rain">
                                    <!-- <div class="echarts" id="rain"></div> -->
                                </li>
                                <li class="chart-hd" id="windPower">
                                    <!-- <div class="echarts" id="windPower"></div> -->
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>        
        </div>
   </div> 
</body>
<script src="../../plugin/jquery-1.11.1.min.js"></script>
<script src="../../plugin/M_select/js/M_select/M_select.js"></script>
<script src="../../plugin/ECharts/echarts.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/weather.js"></script>
<script>
    $(function(){
		// 对所有下拉款进行初始化
	
		$(".select01").M_select({
			// 手动添加下拉款图片（以html页面为起始位置写路径）
			"Img":"../../plugin/M_select/js/M_select/up4.png",
			"Img2":"../../plugin/M_select/js/M_select/down4.png",
			"radius":"10px",
			"Title":"选择城市",
			"inputName":"selected_value",
			// 默认选中的值（参数值写需要选中的select的value值）
			"selected":"03",
			Succee:function(){
            site= $('#selectCity').val()
            console.log(site)
			}
		});
	});
</script>
</html>